<template>
  <div class="word-list">
    <div class="left">
      <div>
        <img :src="list.data.fromheadimgurl"/>
      </div>
      <div>
        <div class="name">{{list.data.fromonickname}}</div>
        <div class="word">{{list.comment}}</div>
        <div class="time">{{createdTime}}<span v-if="canDel" @click="onDel(list.comment_id)">删除</span></div>
      </div>
    </div>
    <div class="right" @click="onLike(list.comment_id)">
      <i class="icon-like" :class="{ color: isLike }"></i>
      <p>{{likeCount}}</p>
    </div>
  </div>
</template>

<script>
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  props: {
    list: {
      type: Object,
      default: {},
    },
    likeList: {
      type: Object,
      default: {},
    },
    canDel: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isLike: false,
      likeCount: 0
    }
  },
  watch: {
    'list.comment_id': {
      handler (newVal) {
        this.isLike = this.likeList.indexOf(newVal) > -1
        this.likeCount = this.list.likes
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    createdTime () {
      let output
      const time = this.list.created
      if (time) {
        output = this.timeFilter2(time)
      }
      return output
    },
  },
  methods: {
    onDel (id) {
      this.$emit('onDel', id)
    },
    async onLike (id) {
      if (!this.isLike) {
        const ret = await this.$store.dispatch('likeStoreComment', {
          comment_id: id
        })
        if (ret.data) {
          this.isLike = true
          this.likeCount = parseInt(this.likeCount) + 1
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.word-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8rpx 45rpx;
  .left {
    display: flex;
    align-items: center;
    img {
      display: block;
      width: 67rpx;
      height: 67rpx;
      border-radius: 50%;
      margin-right: 24rpx;
    }
    .name {
      font-size: 28rpx;
      color: #fff;
    }
    .word {
      font-size: 32rpx;
      color: #fff;
    }
    .time {
      font-size: 18rpx;
      color: #fff;
      span {
        color: #3d81a4;
        font-size: 20rpx;
        padding-left: 15rpx;
      }
    }
  }
  .right {
    padding-right: 20rpx;
    .icon-like {
      display: block;
      width: 30rpx;
      height: 28rpx;
      background: url("../../static/images/index/word-like.png") no-repeat center center;
      background-size: contain;
      &.color {
        background-image: url("../../static/images/index/word-like-c.png");
      }
    }
    p {
      font-size: 19rpx;
      color: #aaa;
      text-align: center;
      padding-top: 8rpx;
      line-height: 1.0;
    }
  }
}
</style>
